{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block navbar %}
<section class="content-header">
    <h1>首页</h1>
    <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 当前位置</li>
        <li class="active">首页</li>
    </ol>
</section>
{% endblock %}

{% block content %}
<div class="box box-primary">
    <div class="box-body">
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <a href="{{ url_for('main.container_look') }}" style="color: #f4f4f4">
                            <h3 id="count01">0</h3>
                            <p>Containers</p>
                        </a>
                    </div>
                    <div class="icon">
                        <i class="ion ion-ios-gear-outline"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-green">
                    <div class="inner">
                        <a href="{{ url_for('main.image_look') }}" style="color: #f4f4f4">
                            <h3 id="count02">0</h3>
                            <p>Images</p>
                        </a>
                    </div>
                    <div class="icon">
                        <i class="ion ion-iphone"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3 id="count03">0</h3>
                        <p>CPU</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3 id="count04">0</h3>
                        <p>内存</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="box-footer">
        <div class="col-sm-12">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <table class="table">
            <tbody>
                <tr>
                    <td>SYSTEM</td>
                    <td>
                        <span class="small text-muted space-left">
                            <i class="fa fa-server" id="system_os">
                                test1
                            </i>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>URL</td>
                    <td>
                        <span class="small text-muted space-left">
                        /var/run/docker.sock
                        </span>
                    </td>
                </tr>
            </tbody>
            </table>
            
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function initPage() {
        var jsInObj = null;
        restTemplate("GET", "/stats/summary", jsInObj, function (jsOutObj) {
            // jsOutObj = JSON.parse(jsOutObj);
            $("#count01").text(jsOutObj.containers_count);
            $("#count02").text(jsOutObj.images_count);
            $("#count03").text(jsOutObj.CPU_count);
            $("#count04").text(jsOutObj.MEM_count);
            $("#system_os").text(jsOutObj.system);
        });
    }
    initPage();
</script>
{% endblock %}